<template>
    <link rel="stylesheet" href="/assets/css/indent-details.css" />

    <!-- 导航栏 -->
    <van-nav-bar title="订单评价" left-text="返回" right-text="提交评价" left-arrow right-arrow @click-left="back"
        @click-right="comment" fixed z-index="100" v-if="info.order.status == 3">
        <template #right>
            <van-icon name="good-job-o" size="25" />
        </template>
    </van-nav-bar>

    <van-nav-bar title="订单评价" left-text="返回" left-arrow @click-left="back" fixed z-index="100"
        v-if="info.order.status > 3" />

    <div class="comment">
        <van-swipe-cell v-for="(product, key) in info.product">
            <van-card :title="'商品名称：' + product.info.name" :thumb="product.info.cover_cdn">
                <template #tags>
                    <van-rate v-if="info.order.status == 3" v-model="product.rate" />
                    <van-rate v-if="info.order.status > 3" v-model="product.rate" readonly />
                </template>

                <template #price>
                    <!-- 商品评价 -->
                    <van-field v-if="info.order.status == 3" v-model="product.remark" rows="2" name="remark"
                        type="textarea" placeholder="请输入商品评价" maxlength="500" show-word-limit />
                    <!-- 大于3 的时候，就只读状态-->
                    <van-field v-if="info.order.status > 3" v-model="product.remark" rows="2" name="remark"
                        type="textarea" placeholder="请输入商品评价" maxlength="500" show-word-limit readonly />

                </template>
            </van-card>
        </van-swipe-cell>
    </div>


</template>

<script>
    export default {
        name: 'OrderComment',
        created() {
            this.orderid = this.$route.query.orderid ? this.$route.query.orderid : 0

            this.OrderData()

        },
        data() {
            return {
                orderid: 0,
                LoginUser: this.$cookies.get('LoginUser'),
                info: {
                    order: {
                        express: {}
                    },
                    address: {},
                    product: [],
                    contact: ''
                }
            }
        },
        methods: {
            back() {
                this.$router.go(-1)
            },
            //订单数据
            async OrderData() {
                //组装数据
                var data = {
                    userid: this.LoginUser.id,
                    orderid: this.orderid
                }

                var result = await this.$api.OrderInfo(data)

                if (result.code == 0) {
                    //提醒信息
                    this.$notify({
                        type: 'error',
                        message: result.msg,
                        duration: 1000,
                        onClose: () => {
                            //返回上一个界面
                            this.$router.go(-1)
                        }
                    })
                    return false
                }

                this.info = result.data


            },
            //提交评价
            async comment() {
                var data = {
                    orderid: this.info.order.id,
                    ids: [],
                    rate: [],
                    remark: []
                }

                ///重新组装数据
                this.info.product.map((product) => {
                    data.ids.push(product.id)
                    data.rate.push(product.rate)
                    data.remark.push(product.remark)
                })

                var result = await this.$api.OrderComment(data)

                if (result.code == 0) {
                    //提醒信息
                    this.$notify({
                        type: 'error',
                        message: result.msg,
                        duration: 1000,
                    })
                } else {
                    //提醒信息
                    this.$notify({
                        type: 'success',
                        message: result.msg,
                        duration: 1000,
                        onClose: () => {
                            //返回上一个界面
                            this.$router.go(-1)
                        }
                    })
                }

            },
        }
    }
</script>


<style>
    .comment {
        margin-top: 4em;
        height: 96vh;
        overflow-x: hidden;
        overflow-y: scroll;
    }

    .van-card__header {
        align-items: top;
    }

    .van-card__price {
        width: 100%;
    }
</style>